<template>
  <div>
    <div class="main">
      <el-card>
        <div>
          <el-progress type="dashboard" :percentage="state.acount">
            <span>全部容量：{{ state.acount }}</span>
          </el-progress>
        </div>
      </el-card>
      <el-card>
        <div>
          <el-progress type="dashboard" :percentage="state.total">
            <span>使用容量：{{ state.total }}</span>
          </el-progress>
        </div>
      </el-card>
      <el-card>
        <div>
          <el-progress type="dashboard" :percentage="state.surplus">
            <span>剩余容量：{{ state.surplus }}</span>
          </el-progress>
        </div>
      </el-card>
    </div>
    <div>
      <ECART :files1="files1" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { memoryApi } from "../utils/api";
import ECART from "../components/ecart.vue";

const state = ref({});
const files1 = ref([]);

const id = localStorage.getItem("id");

onMounted(async () => {
  const res = await memoryApi({ id });
  const { acount, total, surplus, data3 } = res.data;
  state.value = { acount, total, surplus };
  files1.value = data3.map(({ filename, size }) => ({ filename, size }));
  console.log(files1.value);
});

const methods = {};
</script>

<style lang="less" scoped>
.main {
  display: flex;
  margin-top: 20px;
  .el-card {
    width: 300px;
    height: 150px;
    margin: 0 20px;
  }
}
</style>
